<template>
  <div>
    <div class="top">
      <div id="pie" ref="pieDom"></div>

      <div id="bar" ref="barDom"></div>
    </div>

    <div class="bottom">
      <div id="line" ref="lineDom"></div>
    </div>
  </div>
</template>

<script setup>
import { getBar, getLine, getPie } from "@/api/welcome";
import * as echarts from "echarts";
import { nextTick, onMounted, onUnmounted, ref } from "vue";
//创建响应式引用保存dom元素
const pieDom = ref(null);
const barDom = ref(null);
const lineDom = ref(null);
let pieInstance = null;
let barInstance = null;
let lineInstance = null;
const user = JSON.parse(localStorage.getItem("user"));
//初始化echarts实例并设置配置项
onMounted(async () => {
  await nextTick(); //等待dom渲染完成
  pieInstance = echarts.init(pieDom.value);
  barInstance = echarts.init(barDom.value);
  lineInstance = echarts.init(lineDom.value);
  const PieOption = {
    title: {
      text: "消费统计饼图",
      //   subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  const getPieData = async () => {
    const res = await getPie(user.id);
    PieOption.series[0].data = res.data.pie;
    pieInstance.setOption(PieOption);
    console.log(res);
  };
  getPieData();
  //   pieInstance.setOption(PieOption);
  const BarOption = {
    title: {
      text: "消费统计柱状图",
      //   subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "bar",
      },
    ],
  };
  const getBarData = async () => {
    const res = await getBar(user.id);
    console.log(res);
    BarOption.xAxis.data = res.data.bar.map((item) => item.name);
    BarOption.series[0].data = res.data.bar.map((item) => item.value);

    barInstance.setOption(BarOption);
  };
  getBarData();
});
const LineOption = {
  title: {
    text: "消费统计折线图",
    //   subtext: "Fake Data",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};
const getLineData = async () => {
  const res = await getLine(user.id);
  console.log(res);
  // LineOption.series[0].data = res.data.line;
  LineOption.series[0].data = res.data.line.map((item) => item.value);
  LineOption.xAxis.data = res.data.line.map((item) => item.date);
  lineInstance.setOption(LineOption);
};
getLineData();

// 销毁ECharts实例
onUnmounted(() => {
  if (pieInstance != null && pieInstance.dispose) {
    pieInstance.dispose();
  }
});
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 400px;
  /* background-color: yellowgreen; */
}
.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 500px;
  /* background-color: violet; */
  margin-top: 20px;
}
#pie {
  width: 49%;
  height: 100%;
  /* background-color: aqua; */
  background-color: aliceblue;
  padding: 20px;
}
#bar {
  width: 49%;
  height: 100%;
  /* background-color: aquamarine; */
  background-color: aliceblue;
  padding: 20px;
}
#line {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}
</style>